<template>
  <div ref="contentBox" style="height: 100%; overflow: auto">
    <ul class="list-ul" v-if="list.length">
      <li v-for="i in list" class="list-li" :key="i.id">
        <a class="list-a" :href="i.url" target="_blank"> {{ i.title }} </a>
        <span class="list-span">
          <span class="svg-icon">
            <svg fill="currentColor" viewBox="0 0 24 24" width="10" height="10">
              <path
                d="M2 18.242c0-.326.088-.532.237-.896l7.98-13.203C10.572 3.57 11.086 3 12 3c.915 0 1.429.571 1.784 1.143l7.98 13.203c.15.364.236.57.236.896 0 1.386-.875 1.9-1.955 1.9H3.955c-1.08 0-1.955-.517-1.955-1.9z"
                fillRule="evenodd"
              ></path>
            </svg>
          </span>
          {{ i.voteupCount }} 赞同
        </span>
        <span class="list-span">
          <span class="svg-icon">
            <svg
              fill="currentColor"
              viewBox="0 0 24 24"
              width="1.2em"
              height="1.2em"
            >
              <path
                d="M10.241 19.313a.97.97 0 0 0-.77.2 7.908 7.908 0 0 1-3.772 1.482.409.409 0 0 1-.38-.637 5.825 5.825 0 0 0 1.11-2.237.605.605 0 0 0-.227-.59A7.935 7.935 0 0 1 3 11.25C3 6.7 7.03 3 12 3s9 3.7 9 8.25-4.373 9.108-10.759 8.063z"
                fillRule="evenodd"
              ></path>
            </svg>
          </span>
          {{ i.commentCount }} 条评论
        </span>
      </li>
    </ul>
    <div v-else>loading...</div>
    <div v-if="!hasMore" style="font-size: 16px; text-align: center">
      到底了，没内容啦~
    </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  name: "list",
  props: {
    queryName: String,
  },
  data() {
    return {
      show: false,
      list: [],
      offset: 0,
      limit: 20,
      hasMore: true,
    };
  },
  created() {
    this.getList();
  },
  mounted() {
    this.loadMore(this.$refs.contentBox, this.getList);
  },
  methods: {
    handleInfiniteOnLoad() {
      this.getList();
    },
    async getList() {
      if (!this.hasMore) return;
      if (this.queryName === "/") return;
      let { offset, limit } = this;
      let { data } = await axios.get(
        `https://www.zhihu.com/api/v4/columns${this.queryName}/items?limit=${limit}&offset=${offset}`
      );
      let list = data.data.map(i => ({
        title: i.title,
        url: i.url,
        id: i.id,
        commentCount: i.comment_count,
        voteupCount: i.voteup_count,
      }));
      if (data.paging.is_end) {
        this.hasMore = false;
      }
      // offset += limit
      this.list = [...this.list, ...list];
      this.offset += this.limit;
    },
    loadMore(el, callback) {
      function debounce(fn, delay) {
        let timer = null;
        return () => {
          timer && clearTimeout(timer) && (timer = null);
          timer = setTimeout(fn, delay);
        };
      }
      let getMore = function () {
        let hieght = el.clientHeight;
        let scrollHeight = el.scrollHeight;
        let scrollTop = el.scrollTop;
        if (scrollHeight - hieght - scrollTop < 30) {
          callback();
        }
      };
      el.addEventListener("scroll", debounce(getMore, 500));
    },
  },
};
</script>
